<script type="text/javascript">
  function backPreviousPage()
  {
    window.history.back();
  }
  // show 
  function ajaxSearch() {
            var input_data = $('#search_data').val();
            if (input_data.length === 0) {
                $('#suggestions').hide();
            } else {

                var post_data = {
                    'search_data': input_data,
                    '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
                };

                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>user/autocomplete/",
                    data: post_data,
                    success: function(data) {
                        // return success
                        if (data.length > 0) {
                            $('#suggestions').show();
                            $('#autoSuggestionsList').addClass('auto_list');
                            $('#autoSuggestionsList').html(data);
                        }
                    }
                });

            }
        }
</script>

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#red" data-toggle="tab"><?=$product->title ?></a></li>
  <li><a href="#orange" data-toggle="tab">Bài viết</a></li>  
</ul>

<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="red">
      <h1></h1>

      <div class="pull-right">
            <!-- tạo thêm hình cho sản phẩm này -->
            <a href="<?=site_url('product/addMoreImages/'.$product->id) ?>" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-plus"></span> Tạo hình ảnh</a>
            <a href="<?=site_url('product/addArticle/'.$product->id) ?>" class="btn btn-success" role="button"><span class="glyphicon glyphicon-plus"></span> Tạo bài viết</a>
      </div>
      <form class="form-horizontal" role="form" method="post" action="<?=site_url('product/update/'.$product->id) ?>" enctype="multipart/form-data">  
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Tiêu đề</label>
          <div class="col-sm-3">
            <input id="codeInput" type="text" name="title" class="form-control" placeholder="Tên sản phẩm" value="<?=$product->title ?>" required autofocus>
          </div>
        </div>     
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Danh mục</label>
          <div class="col-sm-3">
            <select name="category_id" class="form-control">
                <option value="">--All--</option>
              <?php foreach ($categories as $category): ?>
                <option value="<?=$category->id ?>" <?=($product->category_id == $category->id) ? 'selected' : '' ?>><?=$category->title; ?></option>
              <?php endforeach; ?>
            </select>      
          </div>
          <a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-plus"></span> Tạo danh mục</a>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Designer</label>
          <div class="col-sm-3">
            <input id="search_data" type="text" name="search_data" class="form-control" placeholder="Designer" value="<?=!empty($user->fullname) ? $user->fullname : '' ?>" onkeyup="ajaxSearch();" required>
          </div>    
        </div> 
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label"></label>
          <div id="suggestions" class="col-sm-3 ">
            <div id="autoSuggestionsList"></div>
          </div>
        </div> 
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Code</label>
          <div class="col-sm-3">
            <input id="codeInput" type="text" name="code" class="form-control" placeholder="Mã sản phẩm" value="<?=$product->code ?>" required>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Mã màu</label>
          <div class="col-sm-3">
            <input id="codeInput" type="text" name="color_code" class="form-control" placeholder="Mã màu" value="<?=$product->color_code ?>" required>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Hình</label>
          <div class="col-sm-8">
          <?php 
            if(!empty($product->image))
            { 
              echo '<img src="'.base_url('uploads/image/products/'.$product->image).'" alt="'.$product->title.'" class="img-thumbnail" style="width: 30%">';
            }
            else
            {
              echo '<img src="http://placehold.it/182x250" class="img-thumbnail" style="width: 30%">';
            }
          ?>
          </div>    
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Tải hình</label>
          <div class="col-sm-5">
            <input type="file" id="exampleInputFile" name="userfile">
            <p class="help-block"></p>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Giá</label>
          <div class="col-sm-3">
            <input id="codeInput" type="text" name="price" class="form-control" placeholder="Giá.." value="<?=$product->price; ?>">      
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Giá sale</label>
          <div class="col-sm-3">
            <input id="codeInput" type="text" name="price_sale" class="form-control" placeholder="Giá sale.." value="<?=$product->sale_price; ?>">      
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Thời điểm bắt đầu sale</label>
          <div class="col-sm-3">
            <div class='input-group date' id='datetimepicker8'>
              <input type='text' name="sale_start" class="form-control" placeholder="Chọn từ ngày" value="<?=isset($product->sale_start) ? $product->sale_start : "" ?>" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Thời điểm kết thúc sale</label>
          <div class="col-sm-3">
            <div class='input-group date' id='datetimepicker9'>
              <input type='text' name="sale_end" class="form-control" placeholder="tới ngày" value="<?=isset($product->sale_end) ? $product->sale_end : "" ?>"/>
              <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
        <script type="text/javascript">
                $(function () {
                    $('#datetimepicker8').datetimepicker();
                    $('#datetimepicker9').datetimepicker();
                    $("#datetimepicker8").on("dp.change",function (e) {
                       $('#datetimepicker9').data("DateTimePicker").setMinDate(e.date);
                    });
                    $("#datetimepicker9").on("dp.change",function (e) {
                       $('#datetimepicker8').data("DateTimePicker").setMaxDate(e.date);
                    });
                });
        </script>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Mô tả</label>
          <div class="col-sm-3">
            <textarea class="form-control" rows="3" name="description" placeholder="Mô tả sản phẩm..">
              <?=$product->description; ?>
            </textarea>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-3 control-label">Kích hoạt</label>
          <div class="col-sm-3">
            <label><input type="radio" name="active" id="optionsRadios2" value="1" <?=(!empty($product->active) && ($product->active == 1)) ? 'checked' : ''  ?>> Active</label>
            <label><input type="radio" name="active" id="optionsRadios2" value="0" <?= empty($product->active) ? 'checked' : ''  ?>> Inactive</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" name="updateBtn" value="update_value" class="btn btn-primary">Cập nhật</button>
            <button type="button" name="backPrevBtn" value="goPrevious" class="btn btn-success" onclick="backPreviousPage()">Quay về trang trước</button>      
          </div>
        </div>    
      </form>
    </div>

    <div class="tab-pane" id="orange">      
      <div class="page-header">
        <h1>Bài viết</h1>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
          <thead>
            <tr class="success" align="center">
              <td>Bài viết</td>                       
              <td>Hình ảnh</td>               
              <td>Chi tiết</td>         
            </tr>
          </thead>
          <tbody> 
            <?php foreach($articles as $article): ?>      
              <tr align="center">
                <td><?=$article->title; ?></td>
                <td><img src="<?=base_url('uploads/image/products/'.$article->image) ?>" style="width:30%"></td>
                <td><?=$article->detail; ?></td>
              </tr>
            <?php endforeach; ?>        
          </tbody>
        </table>
      </div>
    </div>    
</div>


